<template>
    <h2 style="text-align: center;">物理网格</h2>
    <!-- 面包屑 -->
     <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格化管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>物理网格</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 左侧区域树形 -->
    <div class="common-layout" style=" margin: 30px 3px;">
        <el-container>
            <!-- 树形数据 -->
            <el-aside width="200px" style="border: 1px solid #ccc; padding: 10px;">
                <el-input
                    v-model="filterText"
                    class="w-60 mb-2"
                    placeholder="请选择关键字"
                />  
                <el-tree
                    ref="treeRef"
                    style="max-width: 600px"
                    class="filter-tree"
                    :data="AreaInfo"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                    @node-Click="treeNodeClick"
                />
            </el-aside>

            <!-- 查询和数据显示部分 -->
            <el-main>
                 <!-- 查询表单部分 -->
                <div style="border: 1px solid #ccc; padding: 20px; margin: -20px 3px; width: 975px;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="网格名称">
                             <el-input v-model="formInline.PhysicalGrid_Name" placeholder="请输入网格名称" clearable />
                        </el-form-item>

                        <el-form-item label="所属区域">
                            <el-cascader v-model="formInline.Area_Id" :options="AreaInfo" :props="props1" clearable  @change="AreaChngae"/>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="GetPhysicalGrid">查询</el-button>
                            <el-button type="danger" @click="Reset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 数据显示部分 -->
                 <div style="border: 1px solid #ccc; padding: 30px; margin: 35px 3px; width: 955px;">
                    <el-button  type="success"  @click="AddPhysicalGrid">新增+</el-button>
                    <el-table :data="Info" style="width: 100%">
                        <el-table-column fixed type="index" label="序号" width="90" />
                        <el-table-column prop="Id" label="编号" width="150" />
                        <el-table-column prop="PhysicalGrid_Name" label="物理网格名称" width="180" />
                        <el-table-column prop="PhysicalGrid_Code" label="网格编码" width="200" />
                        <el-table-column prop="Area_Name" label="所属区域" width="200" />
                        <el-table-column fixed="right" label="Operations" min-width="120">
                        <template #default="setup" >
                            <el-button  type="danger" size="small" @click="DelPhysicalGrid(setup.row.Id)">删除</el-button>
                            <el-button  type="primary" size="small" @click="UpdatePhysicalGrid(setup.row)">编辑</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 添加弹出窗 -->
                <el-dialog
                    v-model="AdddialogVisible"
                    title="添加物理网格"
                    width="620"
                    align-center
                    center
                >
                    <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px"
                        :model="AddInfo"
                        :rules="rules"
                        label-width="auto"
                        class="demo-ruleForm"
                        :size="formSize"
                        status-icon
                    >
                        <el-form-item label="网格名称" prop="PhysicalGrid_Name">
                            <el-input v-model="AddInfo.PhysicalGrid_Name" />
                        </el-form-item>

                        <el-form-item label="网格编码" prop="PhysicalGrid_Code">
                            <el-input v-model="AddInfo.PhysicalGrid_Code"  />
                        </el-form-item>

                        <el-form-item label="所属区域" prop="name">
                            <el-input v-model="AddInfo.Area_Name" disabled/>
                            <!-- <el-cascader v-model="AddInfo.Area_Id" :options="AreaInfo1" :props="props1" clearable  @change="AreaChngae"/> -->
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                添加
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                 <!-- 修改弹出窗 -->
                 <el-dialog
                    v-model="UpdatedialogVisible"
                    title="修改物理网格"
                    width="620"
                    align-center
                    center
                >
                    <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px"
                        :model="AddInfo"
                        :rules="rules"
                        label-width="auto"
                        class="demo-ruleForm"
                        :size="formSize"
                        status-icon
                    >
                        <el-form-item label="网格名称" prop="PhysicalGrid_Name">
                            <el-input v-model="AddInfo.PhysicalGrid_Name" />
                        </el-form-item>

                        <el-form-item label="网格编码" prop="PhysicalGrid_Code">
                            <el-input v-model="AddInfo.PhysicalGrid_Code" />
                        </el-form-item>

                        <el-form-item label="所属区域" prop="name">
                            <el-input v-model="AddInfo.Area_Name" disabled/>
                            <!-- <el-cascader v-model="AddInfo.Area_Id" :options="AreaInfo" :props="props1" clearable  @change="AreaChngae"/> -->
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="UpdatesubmitForm(ruleFormRef)">
                                修改
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

            </el-main>
        </el-container>
    </div>



</template>



<script lang="ts" setup>
    import { reactive } from 'vue'
    import { ref, watch,onMounted } from 'vue'
    import type { TreeInstance } from 'element-plus'
    import axios from 'axios'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'


    //显示响应式数据
    const Info=ref([])
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:3,
        zongtiao:0,
        zongpage:0,
    })
    //查询条件
    const formInline = reactive({
        Area_Id: -1,
        PhysicalGrid_Name: '',
    })
    // 显示
    const GetPhysicalGrid = () => {
        axios.get("http://localhost:5247/api/PhysicalGrid/GetPhysicalGrid",
            {
                params:{
                    Area_Id:formInline.Area_Id,
                    PhysicalGrid_Name:formInline.PhysicalGrid_Name,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Plsit;
            PageInfo.value.zongpage=res.data.ZongPage;
            PageInfo.value.zongtiao=res.data.ZongTiao
        })
    }
    //逻辑删除
    const DelPhysicalGrid = (Id:string) => {
        ElMessageBox.confirm(
            '确定删除?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(() => {
            axios.put("http://localhost:5180/api/PhysicalGrid/DelPhysicalGrid",
                {
                    Id:Id,
                }
            )
            .then(res=>{
                if(res.data.Code==200)
                {
                    ElMessage.success(res.data.Message);
                    GetPhysicalGrid();
                }
                else
                {
                    ElMessage.error(res.data.Message)
                }
            })
        })
    }
    //重置 
    const Reset=()=>{
        formInline.Area_Id=-1;
        formInline.PhysicalGrid_Name="";
    }
//----------------------------------------------树形和级联-------------------------------------------//
    //区域树形响应式数据
    const AreaInfo =ref([]);
    const AreaInfo1 =ref([]);
    onMounted(()=>{
        GetPhysicalGrid();//显示网格信息
        GetAreaTree(); //加载区域树形数据
    })

    //加载区域树形数据
    const GetAreaTree=()=>{
        axios.get("http://localhost:5247/api/Area/GetAreaTree")
        .then(res=>{
            AreaInfo.value=res.data.Data;
            AreaInfo1.value=res.data.Data;
        })
    }
    interface Tree {
        [key: string]: any
    }

    const filterText = ref('')
    const treeRef = ref<TreeInstance>()

    //树形
    const defaultProps = {
        children: 'Children',
        label: 'Area_Name',
    }
    //级联
    const props1 = {
        checkStrictly: true,
        value:"Id",
        label:"Area_Name",
        children:"Children"
    }
    //获取级联数据
    const AreaChngae=(value:any)=>{
        formInline.Area_Id=value[value.length-1];
        AddInfo.value.Area_Id=value[value.length-1];
    }
    watch(filterText, (val) => {
        treeRef.value!.filter(val)
    })

    const filterNode = (value: string, data: Tree) => {
        if (!value) return true
        return data.Area_Name.includes(value)
    }

    const treeNodeClick=(AreaInfo:any)=>{
        ElMessage.success("您选择的节点是："+AreaInfo.Area_Name);
        AddInfo.value.Area_Id=AreaInfo.Area_Id;
        AddInfo.value.Area_Name=AreaInfo.Area_Name;
    }

    
//------------------------------------------------------------添加弹出窗-----------------------------------------------------//
    const AdddialogVisible=ref(false);

    //添加点击按钮
    const AddPhysicalGrid=()=>{
        AdddialogVisible.value=true;
    }

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //添加响应式数据
    const AddInfo= ref({
        Id:"",
        PhysicalGrid_Name: "",
        PhysicalGrid_Code: "",
        Area_Id: "",
        Area_Name:"",
    })

    const locationOptions = ['Home', 'Company', 'School']
    //验证
    const rules = reactive<FormRules>({
        PhysicalGrid_Name: [
            { required: true, message: '请输入网格名称', trigger: 'blur' },
        ],
        PhysicalGrid_Code: [
            { required: true, message: '请输入网格编码', trigger: 'blur' },
        ],
    })
    //添加按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.post("http://localhost:5180/api/PhysicalGrid/AddPhysicalGrid",AddInfo.value)
                .then(res=>{
                    if(res.data.Code=200)
                    {
                        ElMessage.success(res.data.Message);

                        //关闭窗口
                        AdddialogVisible.value=false;
                        GetPhysicalGrid();//跳转到显示页面
                    }
                    else
                    {
                        ElMessage.error(res.data.Message)
                    }
                })
            } else {
                console.log('error submit!', fields)
            }
        })
    }

    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.resetFields()
    }
//------------------------------------------------------------修改弹出窗-----------------------------------------------------//
    
    const UpdatedialogVisible=ref(false);
    //修改点击按钮
    const UpdatePhysicalGrid=(row:any)=>{
        UpdatedialogVisible.value=true;

        AddInfo.value.Id=row.Id,
        AddInfo.value.PhysicalGrid_Name=row.PhysicalGrid_Name,
        AddInfo.value.PhysicalGrid_Code=row.PhysicalGrid_Code;
        AddInfo.value.Area_Id=row.Area_Id
    }

    //修改按钮
    const UpdatesubmitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.put("http://localhost:5180/api/PhysicalGrid/UpdatePhysicalGrid",AddInfo.value)
                .then(res=>{
                    if(res.data.Code=200)
                    {
                        ElMessage.success(res.data.Message);

                        //关闭窗口
                        UpdatedialogVisible.value=false;
                        GetPhysicalGrid();//跳转到显示页面
                    }
                    else
                    {
                        ElMessage.error(res.data.Message)
                    }
                })
            } else {
                console.log('error submit!', fields)
            }
        })
    }

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))

</script>


<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
</style>
